<template>
   <el-dialog
  :visible="dialogVisiblecan"
  width="30%"
  center
  @close='closeFn'
  @open='openFn'>
  <template #title>
    <span>
        <i class="el-icon-warning"></i>
        取消个工单后，将不能恢复，是否确认取消？
    </span>
  </template>
  <el-row type="flex" justify="center">
   <el-col :span="12">
     <el-button size="small" @click="closeFn">取 消</el-button>
    <el-button size="small" type="primary" @click="submit">确 定</el-button>
   </el-col>
  </el-row>
</el-dialog>
</template>

<script>
import { cancalAPI } from '@/api/workorder'
export default {
  props: {
    dialogVisiblecan: Boolean,
    cancal: Boolean,
    DetailList: {
      type: [Array, Object],
      default: () => {}
    }

  },
  data () {
    return {
      pageParams: {
        pageSize: 10,
        isRepair: true
      },
      id: ''
    }
  },
  methods: {
    closeFn () {
      this.$emit('update:dialogVisiblecan', false)
    },
    openFn () {
      this.id = this.DetailList.taskId
      console.log(this.DetailList)
    //   this.$$emit('update:dialogVisible',false)
    },
    async submit () {
    //   console.log(this.DetailList.taskId)

      try {
        await cancalAPI(this.id)
        this.$message('删除成功')
      } catch (error) {
        console.log(error)
        this.$message(error.response.data)
        // this.$message(error)
      }
      this.closeFn()
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .el-dialog {
    height: 150px !important;
    top: 20%;
    border-radius: 2px !important;
}
/deep/ .el-icon-warning {
    color: red;
    font-size: 20px;
}
/deep/ .el-dialog--center .el-dialog__body {
    margin: 10px 0 0 40px !important;
    // text-align: initial;
    // padding: 25px 25px 30px;
}
/deep/ .el-button--primary {
    color: #fff !important;
    background-color: #5f84ff;
    border-color: #5f84ff;
}
</style>
